<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page language="java" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link rel="stylesheet"
	href="<c:url value="/resources/lib/bootstrap-3.3.5/css/bootstrap.min.css"/>" />

<link href="/resources/lib/font-awesome-4.4.0/css/font-awesome.min.css"
	rel="stylesheet" type="text/css" />

<link href="/resources/css/header.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="<c:url value="/resources/css/common.css"/>" />
<link rel="stylesheet"
	href="<c:url value="/resources/css/dataAdaptor/filter.css"/>" />


<script src="<c:url value="/resources/lib/jquery-2.1.4.min.js" />"
	type="text/javascript"></script>
<script
	src="<c:url value="/resources/lib/bootstrap-3.3.5/js/bootstrap.min.js" />"
	type="text/javascript"></script>
<script
	src="<c:url value="/resources/lib/angular-1.4.7/angular.min.js"/>"
	type="text/javascript">
	
</script>
<script
	src="<c:url value="/resources/lib/ui-bootstrap-tpls-0.13.4.min.js"/>"
	type="text/javascript">
	
</script>

<script src="<c:url value="/resources/js/dataAdaptor/filter.js" />"
	type="text/javascript"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>filter</title>
</head>
<body ng-app="conversionTool">
	<ng-include src="'/resources/viewPart/nav.html'"> </ng-include>
	<header>
		<div class="head-line">
			<h3 class="head-title">Filter</h3>
		</div>
	</header>

	<section class="container" ng-controller="filterCtrl">

     <form class="form-horizontal text-center">
		<div ng-init="setDataTemplateId('${dataTemplate.id}')"></div>
		
		<div class="form-group text-center form-line">
		<div class="col-xs-4 text-right">
		<label>Column Name</label>
		</div>		
		<div class="col-xs-8 text-left">
		<div class="btn-group" dropdown keyboard-nav>
						<button id="columnName" type="button" class="btn btn-default"
							dropdown-toggle>
							{{columnName}} <span class="caret"></span>
						</button>
						<ul class="dropdown-menu" id="dropdown-menu-w" role="menu" aria-labelledby="columnName">
							<c:forEach var="item" items="${dataTemplate.header}">

								<li role="menuitem"><a href="#"
									ng-click="setColumnName('${item}')">${item}</a></li>
							</c:forEach>
						</ul>
					</div>
					
		</div>
		</div>
		<div class="form-group text-center form-line">
		<div class="col-xs-4 text-right">
		<label>Operation</label>
		</div>
		
		<div class="col-xs-8 text-left">
		
		<div class="btn-group" dropdown keyboard-nav>
						<button id="operation" type="button" class="btn btn-default"
							dropdown-toggle>
							{{operation}} <span class="caret"></span>
						</button>
						<ul class="dropdown-menu" id="dropdown-menu-p" role="menu" aria-labelledby="operation">
							<li role="menuitem"><a href="#"
								ng-click="setOperation('lessThan')">less than</a></li>
							<li role="menuitem"><a href="#"
								ng-click="setOperation('greaterThan')">greater than</a></li>
							<li role="menuitem"><a href="#"
								ng-click="setOperation('equals')">equals</a></li>
							<li role="menuitem"><a href="#"
								ng-click="setOperation('contains')">contains</a></li>
							<li role="menuitem"><a href="#"
								ng-click="setOperation('notContains')">not contains</a></li>
							<li role="menuitem"><a href="#"
								ng-click="setOperation('equalsNum')">number equals</a></li>
							<li role="menuitem"><a href="#"
								ng-click="setOperation('notLessThan')">not less than</a></li>
							<li role="menuitem"><a href="#"
								ng-click="setOperation('notGreaterThan')">not greater than</a></li>
							<li role="menuitem"><a href="#"
								ng-click="setOperation('equalDate')">date equal</a></li>
							<li role="menuitem"><a href="#"
								ng-click="setOperation('laterThan')">later than</a></li>
							<li role="menuitem"><a href="#"
								ng-click="setOperation('earlierThan')">earlier than</a></li>
							<li role="menuitem"><a href="#"
								ng-click="setOperation('notEarlierThan')">not earlier than</a></li>
							<li role="menuitem"><a href="#"
								ng-click="setOperation('notLaterThan')">not later than</a></li>
						</ul>
					</div>
		</div>
		</div>
		
		<div class="form-group text-center form-line">
		<div class="col-xs-4 text-right">
		<label>Value</label>
		</div>
		<div class="col-xs-8 text-left">
		<input type="text" class="form-control" ng-model="value" />
		
		</div>
		</div>
		
		<div class="form-group text-center form-line">
		<div class="col-xs-4"></div>
		
			<div class="col-xs-8 text-right">
				<input type="button" value="Add" class="btn btn-primary"
					ng-click="addCondition()" />
		</div>
		</div>
		<!-- table list -->
		<div class="form-group text-center form-line">
		<div class="col-xs-4 text-right"><label>Operation List</label> </div>
		<div class="col-xs-8 text-left">
			<table class="table table-bordered table-hover">

				<thead>
					<tr>
						<th>column name</th>
						<th>operation</th>
						<th>value</th>
						<th>delete</th>
					</tr>
				</thead>
				<tbody>
					<tr ng-repeat="(k,item) in formula.filter">
						<td>{{item.columnName}}</td>
						<td>{{item.operation}}</td>
						<td>{{item.value}}</td>
						<td>
						
						<!--  <input type="button" class="btn btn-default" ng-click="deleteFilter(k)" value="delete" />-->
						<button type="button" class="btn btn-default btn-border" ng-click="deleteFilter(k)">
						<span><i class="glyphicon glyphicon-trash"></i></span>
						</button>
						
						</td>
					</tr>
				</tbody>
			</table>
			</div>
			</div>
		<!-- 
			<div class="input-group form-group">
				<div class="input-group-btn">
					<div class="btn-group" dropdown keyboard-nav>
						<button id="columnName" type="button" class="btn btn-default"
							dropdown-toggle>
							{{columnName}} <span class="caret"></span>
						</button>
						<ul class="dropdown-menu" id="dropdown-menu-w" role="menu" aria-labelledby="columnName">
							<c:forEach var="item" items="${dataTemplate.header}">

								<li role="menuitem"><a href="#"
									ng-click="setColumnName('${item}')">${item}</a></li>
							</c:forEach>
						</ul>
					</div>

					<div class="btn-group" dropdown keyboard-nav>
						<button id="operation" type="button" class="btn btn-default"
							dropdown-toggle>
							{{operation}} <span class="caret"></span>
						</button>
						<ul class="dropdown-menu" id="dropdown-menu-p" role="menu" aria-labelledby="operation">
							<li role="menuitem"><a href="#"
								ng-click="setOperation('lessThan')">less than</a></li>
							<li role="menuitem"><a href="#"
								ng-click="setOperation('greaterThan')">greater than</a></li>
							<li role="menuitem"><a href="#"
								ng-click="setOperation('equals')">equals</a></li>
							<li role="menuitem"><a href="#"
								ng-click="setOperation('contains')">contains</a></li>
							<li role="menuitem"><a href="#"
								ng-click="setOperation('notContains')">not contains</a></li>
							<li role="menuitem"><a href="#"
								ng-click="setOperation('equalsNum')">number equals</a></li>
							<li role="menuitem"><a href="#"
								ng-click="setOperation('notLessThan')">not less than</a></li>
							<li role="menuitem"><a href="#"
								ng-click="setOperation('notGreaterThan')">not greater than</a></li>
							<li role="menuitem"><a href="#"
								ng-click="setOperation('equalDate')">date equal</a></li>
							<li role="menuitem"><a href="#"
								ng-click="setOperation('laterThan')">later than</a></li>
							<li role="menuitem"><a href="#"
								ng-click="setOperation('earlierThan')">earlier than</a></li>
							<li role="menuitem"><a href="#"
								ng-click="setOperation('notEarlierThan')">not earlier than</a></li>
							<li role="menuitem"><a href="#"
								ng-click="setOperation('notLaterThan')">not later than</a></li>
						</ul>
					</div>
				</div>
				<input type="text" class="form-control" ng-model="value" />
			</div>
		</div>
            	<div class="form-group text-center form-line">
			<div class="text-right">
				<input type="button" value="Add" class="btn btn-primary"
					ng-click="addCondition()" />
		</div>
		</div>
		
		
		
		<div class="form-group text-center form-line">
			<table class="table table-bordered table-hover">

				<thead>
					<tr>
						<th>column name</th>
						<th>operation</th>
						<th>value</th>
						<th>delete</th>
					</tr>
				</thead>
				<tbody>
					<tr ng-repeat="(k,item) in formula.filter">
						<td>{{item.columnName}}</td>
						<td>{{item.operation}}</td>
						<td>{{item.value}}</td>
						<td><input type="button" class="btn btn-default"
							ng-click="deleteFilter(k)" value="delete" /></td>
					</tr>
				</tbody>
			</table>
		</div>-->
		
 <!-- save button -->
<div class="form-group text-center form-line">
<div class="col-xs-4"></div>
<div class="col-xs-8 text-right">
			
			<input type="button" value="Save" class="btn btn-primary two-btn"
				ng-click="save()" />
				
				<input type="button" value="Back" class="btn btn-primary two-btn"
					ng-click="back()" />
		</div>
		</div>
		
		
		
		
		

		<div class="form-group text-center">
			<div class="control-group error">
				<div class="controls">

					<span class="help-inline">{{msg}}</span>
				</div>
			</div>
		</div>

</form>
	</section>


</body>
</html>
